<script setup>
	import { ref } from 'vue'
	import { http } from '@/utils/http.js'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useUsercodeStore } from '@/store/usercode.js'
	import { parseTime } from '@/utils/index.js'

	// 创建 Store 实例
	const userCodeStore = useUsercodeStore()

	const dealId = ref(0)
	const joininData = ref()
	const daysShort = ref()
	const isJoin = ref(false)
	const joinId = ref(0)
	async function joinDetail() {
		const res = await http.request({
			url: '/api//bidding/biddingDetails',
			method: 'POST',
			data: {
				id: dealId.value,
			},
		})
		console.log(res)
		joininData.value = res.data
		const currentTimestamp = Math.floor(Date.now() / 1000)
		daysShort.value = joininData.value.pass_time - currentTimestamp
		joininData.value.participate.forEach((item) => {
			if (item.user_id == userCodeStore.usercode.user) {
				isJoin.value = true
				joinId.value = item.id
			}
		})

		joininData.value.goods.forEach((item) => {
			const currentTimestamp = Math.floor(Date.now() / 1000)
			let daysShort = item.pass_time - currentTimestamp
			item.passDay = Math.floor(daysShort / (24 * 60 * 60))
		})
	}

	// 撤回出价
	async function cancelJoin() {
		const res = await http.request({
			url: '/api/bidding/backOffer',
			method: 'POST',
			data: {
				id: joinId.value,
			},
		})
		if (res.st == 1) {
			uni.utils.toast('撤销成功')
			isJoin.value = false
			joinDetail()
		} else {
			uni.utils.toast('撤销失败')
		}
	}
	// 参与/查看出价
	function payPage() {
		uni.navigateTo({
			url: `/transactionPage/joinpay/index?id=${dealId.value}`,
		})
	}

	//商品详情弹出
	const goodspopup = ref()
	const goodsInfo = ref({
		goods_name: '',
		img: '',
	})
	function checkgoods(item) {
		console.log(item)
		goodsInfo.value = item
		goodspopup.value.open('bottom')
	}

	onLoad((option) => {
		dealId.value = option.id
	})
	onShow(() => {
		joinDetail()
	})
</script>

<template>
	<view class="join-content">
		<view class="joinin-content-item">
			<view class="joinin-content-item-top">
				<view class="joinin-content-item-top-left">
					<view
						class=""
						style="
							position: relative;
							width: 88rpx;
							height: 88rpx;
							margin-right: 22rpx;
						"
					>
						<image
							:src="joininData.himg"
							style="
								width: 88rpx;
								height: 88rpx;
								border-radius: 50%;
							"
							mode=""
						></image>
					</view>
					<view class="" style="font-size: 30rpx; font-weight: 700">
						{{ joininData.nickname }}
					</view>
				</view>
				<view class="top-time">
					<image
						src="../../static/hourglass.png"
						mode=""
						style="width: 60rpx; height: 60rpx; margin-right: 8rpx"
					></image>
					<view class="" style="font-size: 26rpx">
						<uni-countdown
							:show-day="false"
							:hour="
								Math.floor(
									(daysShort % (60 * 60 * 24)) / (60 * 60)
								)
							"
							:minute="Math.floor((daysShort % (60 * 60)) / 60)"
							:second="Math.floor(daysShort % 60)"
						/>
						<!-- {{
							`${Math.floor(
								(daysShort % (60 * 60 * 24)) / (60 * 60)
							)}:${Math.floor((daysShort % (60 * 60)) / 60)}`
						}} -->
					</view>
				</view>
			</view>
			<view class="joinin-content-item-center">
				<scroll-view
					class="scroll-view_H"
					scroll-x="true"
					style="height: 120rpx; width: 100%"
				>
					<view class="scroll-view_H-list">
						<view
							class="scroll-view_H-item"
							style="position: relative"
							v-for="(goods, index) in joininData.goods"
							:key="'goods' + index"
							@click="checkgoods(goods)"
						>
							<image
								:src="goods.img"
								style="
									width: 130rpx;
									height: 130rpx;
									display: block;
								"
								mode=""
							></image>
							<view class="presare" v-if="goods.type == 1">
								预售
							</view>
							<view v-else class="passTime">
								<image
									src="@/static/pass.png"
									style="width: 16rpx; height: 16rpx"
									mode=""
								></image>
								<view
									class=""
									style="font-size: 12rpx; color: #fff"
								>
									{{ goods.passDay }}天后自动发货
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="total-goods">
					共{{ joininData.goods.length }}件
				</view>
			</view>
			<view class="joinin-content-item-bottom">
				<view class="joinin-content-item-bottom-left">
					<!-- <view class="joinin-content-item-bottom-left-item">
						<image
							src="../../static/start-price.png"
							style="
								width: 42rpx;
								height: 42rpx;
								margin-right: 10rpx;
							"
							mode=""
						></image>
						<view
							class=""
							style="font-size: 20rpx; font-weight: 700"
						>
							{{ joininData.min_price }}
						</view>
					</view> -->
					<view
						class="joinin-content-item-bottom-left-item"
						v-if="joininData.is_buy == 1"
					>
						<image
							src="../../static/one-price.png"
							style="
								width: 42rpx;
								height: 42rpx;
								margin-right: 10rpx;
							"
							mode=""
						></image>
						<view
							class=""
							style="font-size: 20rpx; font-weight: 700"
						>
							{{ joininData.buy_price }}
						</view>
					</view>
					<view class="joinin-content-item-bottom-left-item">
						<image
							src="../../static/join-num.png"
							style="
								width: 42rpx;
								height: 42rpx;
								margin-right: 10rpx;
							"
							mode=""
						></image>
						<view
							class=""
							style="font-size: 20rpx; font-weight: 700"
						>
							{{ joininData.participate_num }}
						</view>
					</view>
				</view>
				<view class="joinin-content-item-bottom-right">
					<view
						class="price-button button"
						v-if="isJoin"
						@click="cancelJoin"
					>
						撤回出价
					</view>
					<view class="join-button back" v-else @click="payPage">
						参与交易
					</view>
				</view>
			</view>
		</view>
		<view class="joinin-list">
			<view
				class="joinin-list-item"
				v-for="item in joininData.participate"
				:key="'user' + item.id"
			>
				<view class="joinin-list-item-left">
					<image
						:src="item.himg"
						style="
							width: 88rpx;
							height: 88rpx;
							margin-right: 18rpx;
							border-radius: 44rpx;
						"
						mode=""
					></image>
					<view class="join-user">
						<view class="join-user-name">
							<view class="name">
								{{ `${item.nickname[0]}****` }}
							</view>
							<view class="back ismine" v-if="item.money > 0">
								我的出价
							</view>
						</view>
						<view class="join-time">{{
							parseTime(item.update_time)
						}}</view>
					</view>
				</view>
				<view class="joinin-list-item-right">
					<view class="mine-price" v-if="item.money > 0">
						<view
							class=""
							style="font-size: 24rpx; font-weight: 700"
						>
							{{ item.money }}
						</view>
					</view>
					<view class="user-button" v-else> 出价**** </view>
				</view>
			</view>
		</view>

		<!-- 详情弹出层 -->
		<uni-popup ref="goodspopup" type="bottom">
			<view class="goodspopup-content">
				<view class="goods-title">{{ goodsInfo.goods_name }} </view>
				<image
					:src="goodsInfo.img"
					style="width: 660rpx; height: 660rpx"
					mode=""
				></image>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.join-content {
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
		.joinin-content-item {
			height: 398rpx;
			margin-bottom: 20rpx;
			padding: 22rpx 18rpx 0 18rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background-color: #fff;
			.joinin-content-item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.joinin-content-item-top-left {
					display: flex;
					align-items: center;
				}
				.top-time {
					display: flex;
					align-items: center;
				}
			}
			.joinin-content-item-center {
				position: relative;
				height: 182rpx;
				padding: 32rpx 0;
				box-sizing: border-box;
				border-bottom: 6rpx solid #f5f5f5;
				.total-goods {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 92rpx;
					height: 46rpx;
					background-color: #eeeeee;
					font-size: 26rpx;
					line-height: 46rpx;
					text-align: center;
					color: #9b9b9d;
				}
				.scroll-view_H {
					.scroll-view_H-list {
						display: flex;
						flex-wrap: nowrap;
						.scroll-view_H-item {
							width: 130rpx;
							height: 130rpx;
							margin-right: 20rpx;
							box-sizing: border-box;
							&:last-child {
								margin-right: 0;
							}
							.presare {
								position: absolute;
								top: 0;
								right: 0;
								width: 54rpx;
								height: 28rpx;
								border-radius: 0 10rpx 0 0;
								background-color: rgba(0, 0, 0, 0.5);
								font-size: 20rpx;
								line-height: 28rpx;
								text-align: center;
								color: #fff;
							}
							.passTime {
								position: absolute;
								top: 0;
								left: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								width: 100%;
								height: 28rpx;
								border-radius: 10rpx 10rpx 0 0;
								background-color: rgba(0, 0, 0, 0.5);
							}
						}
					}
				}
			}
			.joinin-content-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 92rpx;
				.joinin-content-item-bottom-left {
					display: flex;
					align-items: center;
					.joinin-content-item-bottom-left-item {
						width: 134rpx;
						display: flex;
						align-items: center;
					}
				}
				.joinin-content-item-bottom-right {
					.button {
						width: 158rpx;
						height: 58rpx;
						border-radius: 29rpx;
						background-color: #ff5163;
						text-align: center;
						line-height: 58rpx;
						font-size: 24rpx;
						font-weight: 700;
						color: #fff;
					}
					.join-button {
						width: 158rpx;
						height: 58rpx;
						border-radius: 29rpx;
						text-align: center;
						line-height: 58rpx;
						font-size: 24rpx;
						font-weight: 700;
					}
				}
			}
		}
		.joinin-list {
			border-radius: 12rpx;
			background-color: #fff;
			.joinin-list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 170rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				border-bottom: 4rpx dashed #f5f5f5;
				&:last-child {
					border: none;
				}
				.joinin-list-item-left {
					display: flex;
					align-items: center;
					.join-user {
						display: flex;
						flex-direction: column;
						.join-user-name {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							.name {
								margin-right: 10rpx;
								font-size: 26rpx;
								font-weight: 700;
							}
							.ismine {
								width: 118rpx;
								height: 36rpx;
								border-radius: 8rpx;
								text-align: center;
								line-height: 36rpx;
								font-size: 20rpx;
								font-weight: 700;
							}
						}
						.join-time {
							font-size: 22rpx;
							color: #9b9b9d;
						}
					}
				}
				.joinin-list-item-right {
					.mine-price {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 158rpx;
					}
					.user-button {
						width: 158rpx;
						height: 58rpx;
						border-radius: 29rpx;
						background-color: #f7f7f7;
						font-size: 24rpx;
						font-weight: 700;
						line-height: 58rpx;
						text-align: center;
					}
				}
			}
		}
		.back {
			background-color: $transaction-color;
		}
		.goodspopup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 886rpx;
			width: 710rpx;
			margin: 0 auto;
			padding-top: 36rpx;
			box-sizing: border-box;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
			.goods-title {
				margin-bottom: 17rpx;
				font-size: 30rpx;
			}
		}
	}
</style>
